// Learn TypeScript:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/typescript.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class Guide extends cc.Component {

  @property(cc.Sprite)
  imgPic1: cc.Sprite = null;
  @property(cc.Sprite)
  imgPic2: cc.Sprite = null;
  @property(cc.Sprite)
  imgPic3: cc.Sprite = null;
  @property(cc.Node)
  btnComplete: cc.Node = null;
  @property(cc.Node)
  btnNext: cc.Node = null;

  private imgArr: Array<cc.Sprite> = null;
  private showIndex = 0;

  onLoad() {
    this.imgArr = []
    this.imgArr.push(this.imgPic1)
    this.imgArr.push(this.imgPic2)
    this.imgArr.push(this.imgPic3)
  }

  start() {
    this.showIndex = 0;
    this.btnNext.active = true;
    this.btnComplete.active = false;
    this.onShow();
  }

  onComplete() {
    cc.director.resume();
    this.node.destroy();
  }

  onNext() {
    this.showIndex++;
    if (this.showIndex >= this.imgArr.length - 1) {
      this.btnNext.active = false;
      this.btnComplete.active = true;
    }
    this.onShow();
  }

  private onShow() {
    if (this.showIndex >= this.imgArr.length) {
      return false;
    }
    this.imgArr.forEach(value => {
      value.node.active = false;
    })
    this.imgArr[this.showIndex].node.active = true;
    return true;
  }

}
